<template>
  <div>
    <div>
      <h4 class="fw-bold">接口名称</h4>
      <div>{{ detail.interfaceName }}</div>
    </div>
    <div>
      <h4 class="fw-bold">接口描述</h4>
      <div>{{ detail.description }}</div>
    </div>
    <div>
      <h4 class="fw-bold">请求方法</h4>
      <div>{{ detail.method }}</div>
    </div>
    <div>
      <h4 class="fw-bold">接口地址</h4>
      <div>{{ detail.prefix }}{{ detail.path }}</div>
    </div>
    <div>
      <h4 class="fw-bold">接口状态</h4>
      <div v-if="detail.status === 1">设计中</div>
      <div v-if="detail.status === 2">设计完成</div>
      <div v-if="detail.status === 3">已发测试</div>
    </div>
    <div>
      <h4>
        <span class="fw-bold">接口入参</span>
        <span v-if="detail.paramType === 1" style="color:#666">表单请求</span>
        <span v-if="detail.paramType === 2" style="color:#666">JSON请求</span>
        <span v-if="detail.paramType === 3">Query请求</span>
      </h4>
      <!-- 表单或者query请求 -->
      <div v-if="detail.paramType === 1 || detail.paramType === 3">
        <table>
          <thead>
            <tr>
              <th>字段名称</th>
              <th>字段类型</th>
              <th>字段说明</th>
              <th>字段示例</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="param in detail.formOrQueryParam" :key="param.id">
              <td>{{ param.fieldName }}</td>
              <td>
                <span v-if="param.fieldType === 1">object</span>
                <span v-if="param.fieldType === 2">array</span>
                <span v-if="param.fieldType === 3">string</span>
                <span v-if="param.fieldType === 4">boolean</span>
                <span v-if="param.fieldType === 5">number</span>
              </td>
              <td>{{ param.fieldDescription }}</td>
              <td>{{ param.fieldExample }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- json请求 -->
      <div v-if="detail.paramType === 2">
        <a-textarea
          placeholder="Basic usage"
          :value="detail.paramJSON | formatJSONString"
          :rows="4"
          read-only
        />
      </div>
    </div>
    <div>
      <h5>接口出参</h5>
      <div>
        <a-textarea
          placeholder="Basic usage"
          :value="mockData | formatJSONString"
          :rows="4"
          read-only
        />
      </div>
    </div>
    <div>
      <h4>相关开发者</h4>
      <ul>
        <li
          class="fs-12"
          style="float:left;background:#eee;padding:2px;border-radius: 20px;"
        >
          <a-avatar
            style="color: #f56a00; backgroundColor: #fde3cf"
            size="small"
            >U</a-avatar
          >&nbsp;王彬 <span style="color:#777">(前端开发人员)</span>&nbsp;&nbsp;
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" src="./interface-detail.ts"></script>

<style lang="scss">
@import './interface-detail.scss';
</style>
